vue2.0模板的三种写法

最新推荐文章于 2024-06-11 01:02:06 发布

mschange

最新推荐文章于 2024-06-11 01:02:06 发布

阅读量1.2w

点赞数 2

本文链接：https://blog.csdn.net/Lschange/article/details/79164373

版权

vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:`
<h1 style="color:red">第一种写法</h1>
`
})
</script>
</html>

第一种方法使用与比较少的内容量可以使用它,利用``的方式来实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
<template id="template">
<h1>我是模板的第二种写法</h1>
</template>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>

第二种应该是项目中最常见的写法,利用template标签来实现内容的填充,最终通过id或者其他的选择器挂载到template上面,如果用vue-cli,它的模板应该如下面的代码所示

<template>
<!-- 页面的内容 -->
</template>
<script>
/* 页面的js */
</script>
<style scoped>
/* 页面的样式

注意:scoped的作用是style中所有的样式只对本页的html起作用

*/
</style>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script type="x-template" id="template">
<h2>我是模板的第三种写法</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>

这种写法是改变了script中的type.变为type="x-template",并且给它id,最终挂载到template中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了

mschange

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue2.0模板的三种写法

vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现1.html lang="en">head>meta charset="UTF-8">meta name="viewport"content="width=device-width, initial-scale=1.0">meta http-equiv="X-UA-Compatible"c
复制链接

扫一扫